﻿@model Capstone_20130302.Models.Order

@{
    ViewBag.Title = "Checkout";
    Layout = "~/Views/Shared/_FreeLayout.cshtml";
}
<script>
    
    
    $(function () {
        cartmodel.checkout_shippingFees(parseFloat($("#Stores_ShipFee").val()));
        $(".checkout form").bind("submit", function () {
            var cdata = "";
            var shops = cartmodel.shops();
            for (var i = 0; i < shops.length; i++) {
                var shop = shops[i];
                if (shop.isCheckoutshop()) {
                    var products = shop.products();
                    for (var j = 0; j < products.length; j++) {
                        var p = products[j];
                        if (j != 0) cdata += ",";
                        cdata += p.productId + ":" + p.productQuantity();
                    }
                }
            }
            $("#cartdata").val(cdata)
            if (cdata == "") {
                alert("Sorry. You must have at least one item in your cart before checking out.");
                return false;
            }
        })
    })
</script>
<div class="page clearfix" id="p-checkout">

    <div class="checkout">
        <h2>Checkout</h2>
        @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "checkoutForm" }))
        {
            @Html.ValidationSummary(true)

            @Html.ValidationMessageFor(model => model.BillingName)
            @Html.ValidationMessageFor(model => model.BillingAddress.Number)
            @Html.ValidationMessageFor(model => model.BillingAddress.Street)
            @Html.ValidationMessageFor(model => model.BillingAddress.City)
            @Html.ValidationMessageFor(model => model.BillingAddress.State)
            @Html.ValidationMessageFor(model => model.BillingAddress.Zipcode)
            @Html.ValidationMessageFor(model => model.BillingAddress.Country)

            @Html.ValidationMessageFor(model => model.ShippingName)
            @Html.ValidationMessageFor(model => model.ShippingAddress.Number)
            @Html.ValidationMessageFor(model => model.ShippingAddress.Street)
            @Html.ValidationMessageFor(model => model.ShippingAddress.City)
            @Html.ValidationMessageFor(model => model.ShippingAddress.State)
            @Html.ValidationMessageFor(model => model.ShippingAddress.Zipcode)
            @Html.ValidationMessageFor(model => model.ShippingAddress.Country)

            <fieldset>
                <legend>Billing Information</legend>

                <div class="editor-field">
                    @Html.TextBoxFor(model => model.BillingName, new { placeholder = @Html.DisplayNameFor(model => model.BillingName), title = @Html.DisplayNameFor(model => model.BillingName), @class = "span6" })
                </div>

                <div class="controls controls-row">
                    @Html.TextBoxFor(model => model.BillingAddress.Number, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.Number), title = @Html.DisplayNameFor(model => model.BillingAddress.Number), @class = "span2" })
                    @Html.TextBoxFor(model => model.BillingAddress.Street, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.Street), title = @Html.DisplayNameFor(model => model.BillingAddress.Street), @class = "span4" })
                </div>
                <div class="controls controls-row">
                    @Html.TextBoxFor(model => model.BillingAddress.City, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.City), title = @Html.DisplayNameFor(model => model.BillingAddress.City), @class = "span3" })
                    @Html.TextBoxFor(model => model.BillingAddress.State, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.State), title = @Html.DisplayNameFor(model => model.BillingAddress.State), @class = "span3" })
                </div>
                <div class="controls controls-row">
                    @Html.TextBoxFor(model => model.BillingAddress.Zipcode, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.Zipcode), title = @Html.DisplayNameFor(model => model.BillingAddress.Zipcode), @class = "span3" })
                    @Html.TextBoxFor(model => model.BillingAddress.Country, new { placeholder = @Html.DisplayNameFor(model => model.BillingAddress.Country), title = @Html.DisplayNameFor(model => model.BillingAddress.Country), @class = "span3" })
                </div>

                <div class="editor-field form-inline">
                    @*@Html.EditorFor(model => model.IsUsedAsShipping)*@
                    <label class="checkbox">
                        @Html.CheckBoxFor(model => model.IsUsedAsShipping)
                        @Html.DisplayNameFor(model => model.IsUsedAsShipping)</label>
                    @Html.ValidationMessageFor(model => model.IsUsedAsShipping)
                </div>
                <div class="shipping-wrapper">
                    <br />
                    <legend>Shipping Information</legend>
                    <div class="editor-field">
                        @Html.TextBoxFor(model => model.ShippingName, new { placeholder = @Html.DisplayNameFor(model => model.ShippingName), title = @Html.DisplayNameFor(model => model.ShippingName), @class = "span6" })
                        @Html.ValidationMessageFor(model => model.ShippingName)
                    </div>

                    <div class="controls controls-row">
                        @Html.TextBoxFor(model => model.ShippingAddress.Number, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.Number), title = @Html.DisplayNameFor(model => model.ShippingAddress.Number), @class = "span2" })
                        @Html.TextBoxFor(model => model.ShippingAddress.Street, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.Street), title = @Html.DisplayNameFor(model => model.ShippingAddress.Street), @class = "span4" })
                    </div>
                    <div class="controls controls-row">
                        @Html.TextBoxFor(model => model.ShippingAddress.City, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.City), title = @Html.DisplayNameFor(model => model.ShippingAddress.City), @class = "span3" })
                        @Html.TextBoxFor(model => model.ShippingAddress.State, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.State), title = @Html.DisplayNameFor(model => model.ShippingAddress.State), @class = "span3" })
                    </div>
                    <div class="controls controls-row">
                        @Html.TextBoxFor(model => model.ShippingAddress.Zipcode, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.Zipcode), title = @Html.DisplayNameFor(model => model.ShippingAddress.Zipcode), @class = "span3" })
                        @Html.TextBoxFor(model => model.ShippingAddress.Country, new { placeholder = @Html.DisplayNameFor(model => model.ShippingAddress.Country), title = @Html.DisplayNameFor(model => model.ShippingAddress.Country), @class = "span3" })
                    </div>
                </div>
                <input type="hidden" name="cartdata" id="cartdata" />
                @Html.HiddenFor(model => model.StoreId)
                @Html.HiddenFor(model => model.Stores.ShipFee)
                @Html.HiddenFor(model => model.UserId)
            </fieldset>
        }
    </div>
    <div class="cart-view">
        <h3>Shopping cart</h3>
        <div class="cart-wrap" data-bind="foreach: shops">
            <div data-bind="if: isCheckoutshop">
                <div data-bind="foreach: products">
                    <div class="product clearfix">
                        <img src="/Image/10" data-bind="attr:{src: productImage}">
                        <div class="info">
                            <div class="title">
                                <a href="#" data-bind="text: productTitle">Joe Dark Blue Yellow Casual Shoes</a>
                            </div>
                            <div class="price-quantity">
                                $<span data-bind="text: productPrice"></span>
                                x&nbsp;
                            <input type="number" min="1" data-bind="value: productQuantity" />
                            </div>
                            <div class="action"><a href="#" data-bind="click: function(data){$parent.removeProduct(data,$root)}">Remove</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="summary">
            <h4>Summary</h4>
            <table>
                <tr>
                    <th>Total Items</th>
                    <td>
                        <span data-bind="text: checkout_totalItem"></span>
                    </td>
                </tr>
                <tr>
                    <th>Net Total</th>
                    <td>$<span data-bind="text: checkout_netTotal"></span></td>
                </tr>
                <tr>
                    <th>Shipping Fee</th>
                    <td>$<span data-bind="text: checkout_shippingFees"></span></td>
                </tr>
                <tr class="total">
                    <th>SUBTOTAL</th>
                    <td>$<span data-bind="text: checkout_subTotal"></span></td>
                </tr>
            </table>
            <br>
            <p class="small">
                Please read our term of use carefully. By clicking "Check Out" button, you agree with all terms. 
            </p>
            <input form="checkoutForm" type="submit" class="btn" value="Check Out" />
        </div>
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}


<style>
    #p-checkout {
        border: solid 1px #DBDBEA;
        margin: 50px auto;
        padding: 50px 40px 40px 65px;
        box-sizing: border-box;
        line-height: 1.5;
        color: #646472;
        background: #fff url(/Images/ckbg.jpg) right repeat-y;
    }

    h2 {
        font-family: "Century";
        font-weight: normal;
        margin-top: 0;
    }

    .cart-wrap {
        min-height: 235px;
    }

    .checkout {
        width: auto;
        float: left;
    }

    input[type=submit] {
        width: 100%;
        box-sizing: border-box;
        padding: 5px 0;
        text-transform: uppercase;
        margin: 20px 0 0 0;
        display: block;
    }

    .cart-view {
        width: 295px;
        float: right;
        height: 100%;
        background: url(/images/ckout-ribbon.png) no-repeat;
        margin: -58px 0 0 0;
        padding: 20px 0 0 5px;
        box-sizing: border-box;
    }

        .cart-view h3 {
            font-family: "Century";
            font-weight: normal;
            margin-left: 60px;
            font-size: 180%;
            margin-bottom: 20px;
            margin-top: 35px;
            color: #6B522D;
        }

        .cart-view .product {
            height: 45px;
            border-bottom: solid 1px #E3DFD5;
            position: relative;
            padding: 20px 0;
        }

            .cart-view .product:after {
                display: block;
                width: 100%;
                border-bottom: 2px solid #FFF;
                position: absolute;
                left: 0;
                bottom: -3px;
                content: "";
            }

            .cart-view .product:last-child,
            .cart-view .product:last-child:after {
                border-bottom: none;
            }

            .cart-view .product > img {
                width: 50px;
                border: 1px solid #969696;
                padding: 1px;
                background: white;
                box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
                float: left;
            }

            .cart-view .product .info {
                float: left;
                margin-left: 15px;
                width: 220px;
            }

                .cart-view .product .info .title a {
                    font-size: 14px;
                    color: #C44949;
                    display: inline-block;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    width: 220px;
                }

                .cart-view .product .info .price-quantity {
                    float: left;
                    font-size: 16px;
                    color: #555;
                    font-family: "Century";
                }

                    .cart-view .product .info .price-quantity input[type=number] {
                        width: 40px;
                        height: 20px;
                        padding: 0 0 0 5px;
                        line-height: 15px;
                        margin-bottom: 3px;
                    }

                .cart-view .product .info .action {
                    display: none;
                    float: right;
                }

                    .cart-view .product .info .action a {
                        color: rgba(231, 22, 0, 0.79);
                        font-size: 90%;
                    }

            .cart-view .product:hover .info .action {
                display: block;
            }

    .summary h4 {
        color: #6B522D;
        font-weight: normal;
        border-bottom: solid 2px #E4D3BA;
        padding-bottom: 5px;
        margin-bottom: 6px;
    }

    .summary table {
        width: 100%;
    }

        .summary table th {
            font-weight: normal;
            opacity: .8;
            text-align: left;
        }

        .summary table td {
            text-align: right;
        }

        .summary table th,
        .summary table td {
            border-top: dashed 1px #E4D3BA;
            padding: 8px 0;
        }

        .summary table tr:first-child th,
        .summary table tr:first-child td {
            border-top: none;
        }

    .total td, .total th {
        font-weight: bold;
        line-height: 1.5;
    }

    .total td {
        color: #DB6363;
        font-size: 180%;
        font-weight: normal;
        font-family: "Century";
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $(".shipping-wrapper").hide();
        $('#IsUsedAsShipping').click(function () {
            if ($(this).is(':checked')) {
                $(".shipping-wrapper").hide();
            } else {
                $(".shipping-wrapper").show();
            }
        });
    });
</script>
